<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="cate-list">
          <el-button type="primary" style="float: left;margin-bottom: 20px;" @click="toAddCate()">{{$t('action.addFirstCate')}}</el-button>
          <CateUlList style="margin-top: 60px" :list="leftCateList" :active="activeCateId" :selectFn="selectCate" :editFn="toAddCate" :delFn="toDelCate"></CateUlList>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="cate-list">
          <el-button type="primary" style="float: left;margin-bottom: 20px;" @click="toAddCate()">{{$t('action.addSecondCate')}}</el-button>
          <el-table :data="rightCateList" border style="width: 100%">
            <el-table-column
              prop="icon"
              label="图标">
            </el-table-column>
            <el-table-column
              prop="courseCateName"
              label="分类名">
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="toAddCate(scope.row)">{{$t('action.edit')}}</el-button>
                <el-button type="text" size="small" @click="toDelCate(scope.row)">{{$t('action.delete')}}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="rightCateList.length"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <AddCourseCate v-if="isAdd" :model="cateModel" @closePop="addCate"></AddCourseCate>
  </div>
</template>

<script>
  import CateUlList from "@/components/Cate/CateUlList";
  import AddCourseCate from "./model/AddCourseCate";

  export default {
    name: "CourseCate",
    props:[],
    data(){
      return {
        isAdd:false,
        cateModel:{},
        leftCateList:[],
        rightCateList:[],
        activeCateId:null,
        total:0
      }
    },
    components: {AddCourseCate, CateUlList},
    mounted() {
      this.getCateList();
    },
    methods:{
      getCateList(id){
        this.$api.course.getCourseCateList({parentCateId:id}).then(
          res => {
            if(id){
              this.rightCateList = res.data.list;
              this.total = res.count;
            }else{
              this.leftCateList = res.data.list.map(
                item => {
                  item.name = item.courseCateName;
                  return item;
                }
              )
              if(this.leftCateList.length)this.selectCate(this.leftCateList[0])
            }
          }
        )
      },
      handleSizeChange(pageSize){
      },
      handleCurrentChange(currentPage){
      },
      selectCate(cate){
        this.activeCateId = cate.id;
        this.getCateList(cate.id)
      },
      toAddCate(cate){
        this.isAdd = true;
        this.cateModel = cate || {
          id: null,
          parentCateId:this.activeCateId,
          courseCateName: '',
          cateIcon: '',
        };
      },
      addCate(data){
        this.isAdd = false;
        if(data)this.$message({
          type: 'success',
          message: '编辑成功!'
        });
      },
      toDelCate(cate){
        this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-row{
    .el-col{
      .cate-list{
        border-radius: 4px;
        background-color: #ffffff;
        padding: 10px;
      }
    }
  }
</style>
